This chapter describes two sample Web pages created using VBScript, with techniques introduced in Part III (Chapters 12 through 15). The following examples are included:
Example 1. A game designed for young children learning shape and color recognition.
Example 2. A multipage commercial Web site, navigated via an ActiveX Tab Strip control.
Document title: Chesney Mouse
Files:
Page file: mouse.htm (Figures 16.1, 16.2, and 16.4)
Layout file: mouse.alx (Figure 16.3)
Images:
ActiveX controls:
| Note |
The IeImage and IeTimer controls are part of the full installation of Microsoft Internet Explorer 3.x (MSIE 3.x) final version. If you have a beta version of MSIE 3.0 or you did not carry out a full installation, you can also find the preceding controls on the CD-ROM in the \SOURCE\chAPTER16 directory. |
Description: The Chesney Mouse example is a simple game, designed with young preschool children in mind. The program randomly selects a color and a shape from a predefined range. The child has to click on the correct colored shape. If the correct object is selected, the mouse graphic (which follows the cursor around most of the time), collects the cheese from "behind" the object and takes it off to the mouse hole.
The example demonstrates several important concepts (as well as helping as refresher on color and shape recognition!). First, the 2D HTML elements, the colored objects, the mouse, and the cheese are on different layers of the display. Therefore, Chesney Mouse appears to go behind the colored objects. Furthermore, the mouse hole is built from two images-a front and a back. So as Chesney scuttles off into the mouse hole, he appears to be going inside a real hole; his image passes behind the front image but is on top of the back image.
The example also introduces the IeTimer ActiveX control. The timer event is fired at preset intervals while the timer is activated. Code can be written within the timer event handler-in this case, to move our friendly rodent and his favorite Emmantal cheese by two pixels either up or across.
Even though the screen is filled with graphic images, the total graphic content of the page is just over 11KB.
The simple animation is achieved by changing the image's top and left properties at runtime. The Layout control itself doesn't receive mouse events. Therefore, to control the movement of Chesney Mouse around the screen, a single blank image has been used across the entire background of the image, thereby giving you mouse move events.
ActiveX controls: (See Chapters 1, 12, 13, and 14.) The example uses a range of ActiveX controls. The example also demonstrates changing properties at runtime-in this case, to produce a simple animation.
HTML Layout control: (See Chapter 14, "Using the HTML Layout Control.") The entire example is built within a Layout control.
Layering: (See Chapter 14.) The mouse and cheese images are on one layer, the colored objects are on another layer, and the mouse hole is on two different layers.
Arrays: (See Chapter 10, "Using the Power of Arrays.") The ranges of colors and shapes are held within single-dimension static arrays.
Programming Elements: (See Chapter 9 "Making Your Program Flow.") A range of VBScript language elements is used, including conditional statements such as If...Then, Select Case, and For...Next. The VBScript random number generator is also used as shown in Figure 16.1.
Figure 16.1 : The program randomly selects a color and a shape.
When the start button is clicked, a random number is generated, which is then used to select a color and a shape. The color and shape are then displayed in a message that gives a clue about where the child can find the cheese.
The whole of the background is in fact an ActiveX image control, which means that wherever the mouse pointer moves on the screen, an event is fired. This event is used to position Chesney Mouse next to the mouse pointer.
If the child clicks on the correct colored shape, a short animation sequence takes control, allowing Chesney Mouse to run off to his mouse hole with the cheese, as shown in Figure 16.2.
Figure 16.2 : The child's "reward".
Because the Layout control has been used (see Figure 16.3), the various images are stacked in layers, which adds to the realism of the animation. As Chesney Mouse enters his mouse hole, he appears in front of the back of the hole and behind the front of the hole.
Positioning images in this way is an everyday event in normal Windows programming, but it would be impossible in normal HTML. As you can see, the Layout control enables you to produce applications that are usually the domain of Windows programmers. You can now accurately position objects on the Layout canvas to create a reusable file, which is quickly and easily added to your HTML page, as shown in Figure 16.4.
Figure 16.4 : The object declaration for the Layout control in the HTML page.
The Layout control file (shown in Listing 16.1) contains much more than purely graphical and visual references. The file is in fact the complete application for this example, containing all the objects and the script that enables the objects to interoperate.
The script commences by defining and populating the arrays that are used to hold the data for the colors and shapes. The user begins the game by clicking the start button, which activates the CommandButton1 click event handler. This event handler generates random numbers for both the object color and object shape, and it displays the clue message on the screen.
As the mouse is moved around the screen, the Image1_MouseMove event handler is executed. This event moves the Chesney Mouse image (Mousey) to the same location as the mouse pointer.
Each shape on the screen has its own event handler that is executed when the mouse button is pressed over the shape. A special reference name and the position of the shape are passed to the custom procedure CheckForWin.
The CheckForWin procedure compares the reference name of the stored shape with the reference name of the selected shape. If they are the same, the procedure moves the cheese image under the shape and activates the animation sequence by enabling the timer control.
The IeTimer1_Timer event is fired at regular intervals while the timer control is enabled. It moves the images of both the mouse and the cheese upward to a predetermined position and then across the screen until the mouse appears to enter his mouse hole, at which point the timer is disabled. All the controls and events are programmatically disabled during the animation sequence by the use of a flag called Animating.
Listing 16.1. The mouse.alx code.
<SCRIPT LANGUAGE="VBScript">
<!--
Dim Colors(4)
Dim Shapes(2)
Colors(0) = "Red"
Colors(1) = "Blue"
Colors(2) = "Green"
Colors(3) = "Yellow"
Colors(4) = "Orange"
Shapes(0) = "Square"
Shapes(1) = "Triangle"
Shapes(2) = "Circle"
Dim CurrentObject
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub CheckForWin(WhichObject, L, T, W, H)
If Animating = True Then
Exit Sub
End If
If CurrentObject = WhichObject Then
Cheese.Top = (T + (H/2) - (Cheese.Height/2))
Cheese.Left = (L + (W/2) - (Cheese.Width/2))
Mousey.Top = Cheese.Top + 11
Mousey.Left = Cheese.Left - 18
IeTimer1.Enabled = True
Animating = True
Else
Alert "OOPS!"
End If
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes0_MouseDown(Button, Shift, X, Y)
L = shapes0.Left
T = shapes0.Top
W = shapes0.Width
H = shapes0.Height
call CheckForWin("YellowTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub CommandButton1_Click()
If Animating = True Then
Exit Sub
End If
RANDOMIZE
CurrentColor = Int((4 - 0 + 1) * Rnd + 0)
CurrentShape = Int((2 - 0 + 1) * Rnd + 0)
Clue = "The cheese is hiding behind the "
Clue = Clue & Colors(CurrentColor) & " "
Clue = Clue & Shapes(CurrentShape)
Label1.Caption = Clue
CurrentObject = Colors(CurrentColor) & Shapes(CurrentShape)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Image1_MouseMove(Button, Shift, X, Y)
If Animating = True Then
Exit Sub
End If
Mousey.Left = X
Mousey.Top = Y
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes10_MouseDown(Button, Shift, X, Y)
L = shapes10.Left
T = shapes10.Top
W = shapes10.Width
H = shapes10.Height
call CheckForWin("OrangeCircle", L, T, W, H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes1_MouseDown(Button, Shift, X, Y)
L = shapes1.Left
T = shapes1.Top
W = shapes1.Width
H = shapes1.Height
call CheckForWin("OrangeSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes9_MouseDown(Button, Shift, X, Y)
L = shapes9.Left
T = shapes9.Top
W = shapes9.Width
H = shapes9.Height
call CheckForWin("OrangeTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes8_MouseDown(Button, Shift, X, Y)
L = shapes8.Left
T = shapes8.Top
W = shapes8.Width
H = shapes8.Height
call CheckForWin("GreenSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes7_MouseDown(Button, Shift, X, Y)
L = shapes7.Left
T = shapes7.Top
W = shapes7.Width
H = shapes7.Height
call CheckForWin("YellowCircle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes6_MouseDown(Button, Shift, X, Y)
L = shapes6.Left
T = shapes6.Top
W = shapes6.Width
H = shapes6.Height
call CheckForWin("RedTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes5_MouseDown(Button, Shift, X, Y)
L = shapes5.Left
T = shapes5.Top
W = shapes5.Width
H = shapes5.Height
call CheckForWin("RedCircle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes4_MouseDown(Button, Shift, X, Y)
L = shapes4.Left
T = shapes4.Top
W = shapes4.Width
H = shapes4.Height
call CheckForWin("RedSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes3_MouseDown(Button, Shift, X, Y)
L = shapes3.Left
T = shapes3.Top
W = shapes3.Width
H = shapes3.Height
call CheckForWin("BlueSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes2_MouseDown(Button, Shift, X, Y)
L = shapes2.Left
T = shapes2.Top
W = shapes2.Width
H = shapes2.Height
call CheckForWin("BlueCircle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes14_MouseDown(Button, Shift, X, Y)
L = shapes14.Left
T = shapes14.Top
W = shapes14.Width
H = shapes14.Height
call CheckForWin("YellowSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes13_MouseDown(Button, Shift, X, Y)
L = shapes13.Left
T = shapes13.Top
W = shapes13.Width
H = shapes13.Height
call CheckForWin("GreenTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes12_MouseDown(Button, Shift, X, Y)
L = shapes12.Left
T = shapes12.Top
W = shapes12.Width
H = shapes12.Height
call CheckForWin("GreenCircle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes11_MouseDown(Button, Shift, X, Y)
L = shapes11.Left
T = shapes11.Top
W = shapes11.Width
H = shapes11.Height
call CheckForWin("BlueTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
dim Animating
Sub IeTimer1_Timer()
If Mousey.Top > 57 Then
Mousey.Top = Mousey.Top - 2
Cheese.Top = Cheese.Top - 2
Else
Mousey.Left = Mousey.Left + 2
Cheese.Left = Cheese.Left + 2
If Mousey.Left > 360 Then
IeTimer1.Enabled = False
Animating = False
End If
End If
end sub
-->
</SCRIPT>
<DIV BACKGROUND="#ffffff" ID="Layout3" STYLE="LAYOUT:FIXED;WIDTH:415pt;
HEIGHT:256pt;">
<OBJECT ID="IeTimer1"
CLASSID="CLSID:59ccB4A0-727D-11CF-AC36-00AA00A47DD2"
STYLE="TOP:30pt;LEFT:386pt;WIDTH:23pt;HEIGHT:41pt;ZINDEX:0;">
<PARAM NAME="_ExtentX" VALUE="820">
<PARAM NAME="_ExtentY" VALUE="1455">
<PARAM NAME="Interval" VALUE="5">
<PARAM NAME="Enabled" VALUE="False">
</OBJECT>
<OBJECT ID="Image1"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF" STYLE="TOP:0pt;
LEFT:4pt;WIDTH:409pt;HEIGHT:251pt;ZINDEX:1;">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="14429;8855">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="Label1"
CLASSID="CLSID:978C9E23-D4B0-11CE-Bf2D-00AA003f40D0"
STYLE="TOP:221pt;LEFT:8pt;WIDTH:323pt;HEIGHT:15pt;ZINDEX:2;">
<PARAM NAME="ForeColor" VALUE="16744448">
<PARAM NAME="BackColor" VALUE="16777215">
<PARAM NAME="Size" VALUE="11395;529">
<PARAM NAME="FontName" VALUE="Arial Rounded MT Bold">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="240">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>
<OBJECT ID="Image2"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:34pt;LEFT:334pt;WIDTH:38pt;HEIGHT:35pt;ZINDEX:3;">
<PARAM NAME="PicturePath" VALUE="hole1.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1323;1217">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="Label2"
CLASSID="CLSID:978C9E23-D4B0-11CE-Bf2D-00AA003f40D0" STYLE="TOP:4pt;
LEFT:41pt;WIDTH:329pt;HEIGHT:22pt;ZINDEX:4;">
<PARAM NAME="ForeColor" VALUE="12615935">
<PARAM NAME="BackColor" VALUE="16777215">
<PARAM NAME="VariousPropertyBits" VALUE="268435483">
<PARAM NAME="Caption" VALUE="Help Chesney Mouse find the Cheese">
<PARAM NAME="Size" VALUE="11606;776">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="360">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>
<OBJECT ID="Cheese"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:49pt;LEFT:379pt;WIDTH:17pt;HEIGHT:23pt;ZINDEX:5;">
<PARAM NAME="PicturePath" VALUE="cheese.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="582;794">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="Mousey"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:26pt;LEFT:221pt;WIDTH:23pt;HEIGHT:26pt;ZINDEX:6;">
<PARAM NAME="PicturePath" VALUE="mouse.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="794;926">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes2"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:169pt;LEFT:105pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:7;">
<PARAM NAME="PicturePath" VALUE="bluecircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes4"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:98pt;LEFT:161pt;WIDTH:30pt;HEIGHT:28pt;ZINDEX:8;">
<PARAM NAME="PicturePath" VALUE="redsquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;979">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes0"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:56pt;LEFT:278pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:9;">
<PARAM NAME="PicturePath" VALUE="yellowtriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes1"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:38pt;LEFT:23pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:10;">
<PARAM NAME="PicturePath" VALUE="orangesquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1005">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes3"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:53pt;LEFT:98pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:11;">
<PARAM NAME="PicturePath" VALUE="bluesquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1005">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes5"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:113pt;LEFT:90pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:12;">
<PARAM NAME="PicturePath" VALUE="redcircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes6"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:98pt;LEFT:229pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:13;">
<PARAM NAME="PicturePath" VALUE="redtriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes7"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:98pt;LEFT:19pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:14;">
<PARAM NAME="PicturePath" VALUE="yellowcircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes8"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:154pt;LEFT:285pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:15;">
<PARAM NAME="PicturePath" VALUE="greensquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1005">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes13"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:154pt;LEFT:26pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:16;">
<PARAM NAME="PicturePath" VALUE="greentriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes11"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:101pt;LEFT:323pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:17;">
<PARAM NAME="PicturePath" VALUE="bluetriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes12"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:150pt;LEFT:165pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:18;">
<PARAM NAME="PicturePath" VALUE="greencircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes14"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:165pt;LEFT:341pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:19;">
<PARAM NAME="PicturePath" VALUE="yellowsquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1005">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes9"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:49pt;LEFT:173pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:20;">
<PARAM NAME="PicturePath" VALUE="orangetriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes10"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:165pt;LEFT:229pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:21;">
<PARAM NAME="PicturePath" VALUE="orangecircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="Image3"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:35pt;LEFT:358pt;WIDTH:31pt;HEIGHT:38pt;ZINDEX:22;">
<PARAM NAME="PicturePath" VALUE="hole2.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1085;1323">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="CommandButton1"
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:214pt;LEFT:338pt;WIDTH:68pt;HEIGHT:30pt;TABINDEX:2;ZINDEX:23;">
<PARAM NAME="ForeColor" VALUE="65280">
<PARAM NAME="BackColor" VALUE="16744576">
<PARAM NAME="Caption" VALUE="START!!">
<PARAM NAME="Size" VALUE="2399;1058">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="240">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>
</DIV>
Document title: Qwerty Manufacturing Inc.
Files:
Page files:
Layout file: tabstrip.alx (see Figures 16.5 through 16.8)
Images:
ActiveX control: Tab Strip
| Note |
The Tab Strip control is part of the full installation of Microsoft Internet Explorer 3.x (MSIE 3.x) final version. If you have a beta version of MSIE 3.0 or you did not carry out a full installation, you can also find the control on the CD-ROM in the \SOURCE\chAPTER16 directory. |
Description: The Qwerty Manufacturing example shows the implementation of an ActiveX Tab Strip control as a navigation aid. The tab strip takes the place of hyperlinked or button-controlled menus, allowing the user to quickly and easily navigate between pages. The HTML Layout control containing the tab strip is held in the top frame of a frameset.
ActiveX controls: (See Chapters 1, 12, 13, and 14.)
HTML Layout control: (See Chapter 14.)
Use of frames: The Tab Strip control in the top frame changes the HTML page in the bottom frame.
The index page loads as shown in Figure 16.5. As it loads, two frames are created: an upper frame containing the tabstrip.alx file and a lower frame containing the first page (welcome.htm).
Figure 16.5 : The welcome page.
This example demonstrates the creativity you can use when designing user interfaces with the Layout control. Again, you are making use of controls and functionality that were once the reserve of Windows programmers. As you can see from this example, by simply clicking the tab strip headers, you can navigate around the Web site (shown in Figure 16.6) as if it is a Windows dialog.
Figure 16.6 : Clicking the tab strip loads the next page.
You can make your Web site stand out from the crowd by using the latest ActiveX controls as navigation tools (shown in Figure 16.7), rather than using straightforward hyperlinks.
Figure 16.7 : Another page of the Web site.
Only two tabs are defined at design time, as shown in Figure 16.8. The rest are added programmatically as the page loads.
Figure 16.8 : The Properties window for tabstrip.alx .
Listing 16.2 shows the complete source code for tabstrip.alx. As the page loads, the OnLoad event handler is executed. This creates three new tabs in positions 2, 3, and 4. When the user clicks a tab, the tab strip's Click event is fired. A straightforward Select Case block is used to execute code that loads a given page based on the tab that was clicked.
Listing 16.2. The tabstrip.alx code.
<SCRIPT LANGUAGE="VBScript">
<!--
Sub TabStrip1_Click(Index)
Select Case Index
Case 0
Top.bodyframe.Location.Href = "welcome.htm"
Case 1
Top.bodyframe.Location.Href = "whatsnew.htm"
Case 2
Top.bodyframe.Location.Href = "products.htm"
Case 3
Top.bodyframe.Location.Href = "contacts.htm"
Case 4
Top.bodyframe.Location.Href = "ordering.htm"
End Select
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Layout1_OnLoad()
call TabStrip1.Tabs.Add(thirdTab, "Product Index", 2)
call TabStrip1.Tabs.Add(fourthTab, "Contact Info", 3)
call TabStrip1.Tabs.Add(fifthTab, "Ordering", 4)
end sub
-->
</SCRIPT>
<DIV BACKGROUND="#ffffff" ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:480pt;
HEIGHT:33pt;">
<OBJECT ID="TabStrip1"
CLASSID="CLSID:EAE50EB0-4A62-11CE-BED6-00AA00611080"
STYLE="TOP:0pt;LEFT:0pt;WIDTH:480pt;HEIGHT:34pt;TABINDEX:0;ZINDEX:0;">
<PARAM NAME="ListIndex" VALUE="0">
<PARAM NAME="BackColor" VALUE="16777215">
<PARAM NAME="ForeColor" VALUE="128">
<PARAM NAME="Size" VALUE="16933;1199">
<PARAM NAME="Items" VALUE="Welcome - Home;What's New;">
<PARAM NAME="TipStrings" VALUE="Our Home Page;News from Qwerty;">
<PARAM NAME="Names" VALUE="Tab1;Tab2;">
<PARAM NAME="NewVersion" VALUE="-1">
<PARAM NAME="TabsAllocated" VALUE="2">
<PARAM NAME="Tags" VALUE=";;">
<PARAM NAME="TabData" VALUE="2">
<PARAM NAME="Accelerator" VALUE="W;P;">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="200">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="FontWeight" VALUE="700">
<PARAM NAME="TabState" VALUE="3;3">
</OBJECT>
</DIV>